<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>itRoom-begin</title>
    <style>
      @font-face {
        font-family: Comfortaa;
        src: url(Comfortaa.ttf);
      }

      .show-content {
        opacity: 1;
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Comfortaa';
        text-decoration: none;
        color: #ffffff;
      }

      body {
        max-width: 666px;
        background-color: #191919;
        opacity: 0;
        transition: opacity 1s;
      }

      header {
        position: fixed;
        display: flex;
        justify-content: space-between;
        background-color: #191919;
        height: 100px;
        width: 100vw;
        max-width: 666px;
        padding: 20px;
      }

      .join-btn {
        background: linear-gradient(
          to right,
          #c70bc5,
          #ff0066,
          #f65800,
          #ffed67,
          #3257ff,
          #3257ff,
          #ffed67,
          #f65800,
          #ff0066,
          #c70bc5
        );
        border: none;
        animation: rainbow_animation 4s ease-in-out infinite;
        background-size: 400% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 15px;
        border-radius: 5px;
        font-weight: bolder;
        font-size: small;
        height: 54px;
      }

      .logo > img {
        width: 140px;
      }

      .logo > h6 {
        padding-top: 10px;
      }

      .main-menu {
        padding: 100px 20px 20px 20px;
      }

      @keyframes rainbow_animation {
        0% {
          background-position: 0 0;
        }
        50% {
          background-position: 100% 0;
        }
        100% {
          background-position: 0 0;
        }
      }

      @media (min-width: 666px) {
        header {
          padding: 80px;
        }

        .main-menu {
          padding: 160px 80px 12px 80px;
        }

        /* .main-menu > ul > li {
          padding: 12px 80px;
        } */
      }
    </style>
  </head>
  <body>
    <header>
      <a href="./index.html">
        <div class="logo">
          <img src="./logo.png" alt="itRoom" />
          <h6>Вводный курс 10+</h6>
        </div>
      </a>

      <a href="./join.html" class="join-btn">записаться</a>
    </header>
    <div class="main-menu">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate
      architecto quasi saepe enim deleniti quibusdam explicabo autem! Rem magni
      reiciendis rerum laborum minima alias iure dolorum, ad fuga nulla
      adipisci? Beatae illo voluptatem facere quas dignissimos sit, hic nesciunt
      tempora amet ut ab saepe quia laboriosam expedita assumenda accusantium
      dolores aliquid? Culpa magnam quaerat eveniet vero sed incidunt non
      aperiam. Repellat illo accusamus animi quasi perspiciatis quos architecto
      omnis rem? Asperiores, architecto culpa, fuga reprehenderit nulla
      veritatis esse voluptatem omnis voluptatibus, optio vitae repellendus
      dignissimos. Accusantium voluptatum quas ad nisi? Eum, dolor modi? Hic eos
      ipsa eligendi eaque voluptas nostrum vitae asperiores perspiciatis fuga
      laboriosam vero praesentium eveniet, deserunt inventore doloremque ipsam
      consequatur aspernatur! Molestias sunt officiis alias non voluptatem.
      Porro explicabo fugit repellat unde minus veritatis aut voluptatum
      delectus, vero et consequatur maiores, autem non numquam, eius eveniet
      quaerat mollitia harum expedita enim! Sint earum architecto fuga at
      perspiciatis. Molestiae voluptatem quidem ab odit saepe doloremque labore
      ipsum tempora, aspernatur in illo, facilis porro esse amet, unde animi
      quae cumque cupiditate officiis alias culpa et! Ducimus debitis tenetur
      sunt. Quod obcaecati est itaque animi iure adipisci quas consequuntur
      perspiciatis, officiis facilis voluptatem necessitatibus. Fugiat velit,
      similique atque, totam, quas aspernatur rerum fuga illo iusto error esse.
      Autem, harum necessitatibus! Harum officiis alias at modi recusandae,
      totam eum soluta! Quas, quidem tenetur. Accusamus, assumenda aliquam
      cumque reprehenderit amet nihil ullam dicta perferendis fuga enim
      molestiae, aperiam atque, suscipit sapiente similique. Nostrum vero ad
      voluptatem cupiditate error commodi eligendi, officiis aspernatur quisquam
      sunt cumque fugiat nemo, alias dolorem illo sequi maiores a officia dicta,
      rerum debitis quod? Facere illo nam enim! Possimus, porro odit reiciendis
      laboriosam temporibus obcaecati at ad harum dolore fugit dolor, deleniti
      hic molestiae laborum alias qui consectetur impedit excepturi.
      Perspiciatis, laboriosam ipsam? Incidunt in rerum deleniti. Adipisci?
      Voluptates quis expedita facilis, quibusdam dolor repudiandae aspernatur
      officia incidunt doloremque laborum dignissimos necessitatibus dolore,
      ullam enim autem, aperiam hic sint blanditiis est magni eos corporis
      reiciendis possimus laboriosam! Rerum. Obcaecati sit eum debitis excepturi
      pariatur at? Repudiandae inventore officia autem fugiat enim ducimus
      accusantium sequi aspernatur quas, perferendis cupiditate nemo cum dolor
      soluta aut, quaerat laudantium necessitatibus? Repellat, sed! At a
      accusantium perferendis aspernatur molestias, voluptate consectetur aut
      porro natus temporibus distinctio fugit officia est, exercitationem
      pariatur vitae blanditiis nam eum neque commodi sint voluptas
      voluptatibus? Repellendus, accusantium quibusdam. Quos nemo, sunt ex
      inventore quibusdam provident sequi praesentium! Dolore cumque
      perspiciatis voluptatem vitae, molestias hic, voluptate ut id ex facere
      laudantium aspernatur. Odio maxime dolore ipsam similique illo animi?
      Ducimus atque totam aut earum reiciendis quasi fuga rem laudantium, fugit
      explicabo, numquam saepe, doloremque suscipit. Sit impedit ea nostrum.
      Dolorum molestiae doloremque, ducimus quis sint praesentium repellat in
      corrupti? Natus reprehenderit, maxime cumque libero dignissimos magni
      neque animi accusamus. Neque autem modi id. Iusto, exercitationem natus?
      Sed at possimus sequi odio, ipsa reiciendis molestiae quisquam, corporis
      iusto quia architecto? Nam omnis illo laborum, ea culpa nobis a eveniet
      vitae, sunt sapiente veniam iure modi exercitationem ratione eaque iusto
      earum atque aliquid ad doloribus, recusandae quidem? Inventore architecto
      dignissimos quas! Labore accusamus minus libero exercitationem voluptatem?
      Dolore nihil voluptas corrupti praesentium! Cupiditate quia sapiente
      consequatur ipsa aspernatur, officia esse omnis culpa nihil quod quo
      numquam dolorem enim beatae, impedit aliquid. Incidunt neque consequuntur
      qui modi impedit? Aperiam atque quas temporibus ad quibusdam, laborum
      nostrum animi deleniti dolorum corrupti aliquam sint dolor. Nihil nobis
      placeat porro laborum officia dicta deleniti explicabo? Fugiat eum
      consectetur, repellat officia quaerat eius commodi quo, excepturi
      aspernatur voluptatem iusto quas quasi earum, quae similique sunt aut
      alias. Consequatur id repellendus veniam molestiae tempore similique,
      ratione quisquam? Hic expedita vel ea ad, quo corporis atque vero, rerum
      impedit nemo saepe quia nisi quisquam voluptates asperiores consequuntur
      dolorem in totam voluptatum voluptas quis. Alias earum similique accusamus
      error? Accusamus officiis, dolorem hic, dolor consequuntur quod magnam
      commodi sapiente nam adipisci doloribus laudantium libero! Accusantium,
      molestias architecto. Quae, illo vel. Error quas, eveniet odit corrupti
      incidunt est enim vitae. Sapiente odio minima, atque quae repellat
      voluptatibus voluptatum ipsum vel. Perspiciatis, praesentium dolore eum
      iure, nihil pariatur consequuntur porro nisi quod explicabo ad veniam modi
      ex esse, accusantium provident sapiente? Facere, voluptatem reiciendis.
      Voluptates ad tempora perferendis, illo minus accusamus fugiat consequatur
      reprehenderit iste quia, architecto consectetur maiores vel delectus
      mollitia quisquam harum dolores voluptatibus dolor, aut incidunt facere.
      Est? Delectus ratione aperiam aspernatur eos velit enim perferendis sequi
      obcaecati? Molestiae officiis magnam nisi iste odio non sed dolorum nemo
      asperiores suscipit. Temporibus eum itaque ea eligendi. Quod, possimus
      cum. Pariatur odit, tempora quas rerum dolorum sed consequatur commodi ex
      possimus corporis natus ut ea quidem autem soluta nemo harum alias dicta
      delectus fugit laboriosam! Vitae quasi laborum esse consequatur? A nihil
      quam illo voluptatum voluptas modi sapiente! Magnam libero, tenetur, illum
      reprehenderit dolorum est nostrum eius corporis, eum delectus fuga.
      Officia ab ea quis ex animi iure blanditiis minima. Similique culpa illo
      in illum nulla corporis et, fugiat eveniet dicta officia accusantium nemo
      minima at odit saepe itaque unde natus esse fuga distinctio
      exercitationem. Amet ab earum recusandae asperiores. Unde soluta nulla
      facere consequatur cumque recusandae, fugit praesentium repudiandae
      similique esse fugiat, labore nihil ipsum pariatur rerum ea suscipit
      officiis accusamus eveniet ad delectus ab? Fugit aliquid nobis vel.
      Placeat sint delectus eligendi vero possimus doloribus magnam maxime
      itaque facilis perspiciatis qui inventore pariatur, quasi iste voluptatum
      necessitatibus laborum soluta atque? Ex quis tempora, esse quo provident
      ut expedita.
    </div>

    <script>
      window.addEventListener('load', () => {
        document.body.classList.add('show-content')
      })
    </script>
  </body>
</html>
